<td-layout-nav logo="assets:covalent" navigationRoute="/">
  <button mat-icon-button td-menu-button tdLayoutToggle>
    <mat-icon>menu</mat-icon>
  </button>
  <div td-toolbar-content layout="row" layout-align="center center" flex>
    <span>Quickstart</span>
    <span flex></span>
    <a mat-icon-button matTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank"><mat-icon>chrome_reader_mode</mat-icon></a>
    <a mat-icon-button matTooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><mat-icon svgIcon="assets:github"></mat-icon></a>
  </div>
  <td-layout-manage-list
                        [opened]="media.registerQuery('gt-sm') | async"
                        [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'"
                        [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '257px' : '100%'">
    <mat-toolbar td-sidenav-content>
      <span>Product Name</span>
    </mat-toolbar>
    <mat-nav-list td-sidenav-content [tdLayoutManageListClose]="!media.query('gt-sm')">
      <a mat-list-item
        [routerLinkActive]="['active']"
        [routerLinkActiveOptions]="{exact:true}"
        [routerLink]="['/product']">
        <mat-icon matListIcon>dashboard</mat-icon>
        Dashboard
      </a>
      <a mat-list-item
        [routerLinkActive]="['active']"
        [routerLinkActiveOptions]="{exact:true}"
        [routerLink]="['stats']">
        <mat-icon matListIcon>insert_chart</mat-icon>
        Stats
      </a>
      <a mat-list-item
        [routerLinkActive]="['active']"
        [routerLinkActiveOptions]="{exact:true}"
        [routerLink]="['features']">
        <mat-icon matListIcon>star</mat-icon>
        Features
      </a>
      <a mat-list-item>
        <mat-icon matListIcon>people</mat-icon>
        Customers
      </a>
      <h3 matSubheader>Admin Menu</h3>
      <a mat-list-item>
        <mat-icon matListIcon>receipt</mat-icon>
        Log
      </a>
      <a mat-list-item>
        <mat-icon matListIcon>settings</mat-icon>
        Settings
      </a>
    </mat-nav-list>
    <mat-toolbar>
      <button mat-icon-button tdLayoutManageListOpen [hideWhenOpened]="true">
        <mat-icon>arrow_back</mat-icon>
      </button>
      <div td-toolbar-content layout="row" layout-align="start center" flex>
        <span>{{title}}</span>
        <span flex></span>
        <button mat-icon-button><mat-icon >view_module</mat-icon></button>
        <button mat-icon-button><mat-icon >sort</mat-icon></button>
        <button mat-icon-button><mat-icon >settings</mat-icon></button>
        <button mat-icon-button><mat-icon >more_vert</mat-icon></button>
      </div>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </td-layout-manage-list>
</td-layout-nav>
